<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<ul class="breadcrumb panel">
    <li><a href="javascript:backMainFun();"><i class="fa fa-home"></i> 首页</a></li>
    <li class="active">角色管理</li>
</ul>

<div class="panel">
    <div class="panel-body">
        <form action="" onsubmit="return false;">
            <div class="row">
                <div class="col-xs-3">
                    <div class="form-group marBN">
                        <div class="iconic-input">
                            <i class="fa fa-maxcdn"></i>
                            <input type="text" class="form-control" id="query_name" name="query_name" placeholder="按名称查找">
                        </div>
                    </div>
                </div>
                <div class="col-xs-9">
                    <button id="searchBtn" type="submit" class="btn btn-success"><i class="glyphicon glyphicon-search"></i> 查找</button>
                    <button type="reset" class="btn btn-warning"><i class="fa fa-trash-o"></i> 清空</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="panel">
    <header class="panel-heading">
        角色列表
    </header>
    <div class="panel-body">
        <div id="toolbar">
            <a href="javascript:loadFun('/role/toRoleAdd');" class="btn btn-info"><i class="glyphicon glyphicon-plus"></i> 新增角色</a>
        </div>
        <table id="table1"
               data-toggle="table"
               data-classes="table table-hover"
               data-sort-order="asc"
               data-method="get"
               data-data-type="json"
               data-pagination="true"
               data-show-columns="true"
               data-minimum-count-columns="3"
               data-page-size="10"
               data-locale="zh-CN"
               data-striped="true"
        ></table>
    </div>
</div>
<div class="modal fade" id="fjsMal">
    <div class="modal-dialog" style="width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">赋权限</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="role_id_hide" value="">
                <div class="row icheck" id="checkBox">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-off"></i> 关闭</button>
                <button id="subfjsBtn" type="button" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> 确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>

    $('#searchBtn').click(function(){
        $("#table1").bootstrapTable('refreshOptions',
                {
                    pagination: true,
                    dataShowToggle: true,
                    url: "${ctx}/role/getRoleList",
                    queryParams: function (params) {
                        return $.extend({}, params, {
                            query_name: $('#query_name').val()
                        });
                    }
                });
    });


    $("#table1").bootstrapTable({
        contentType: "application/x-www-form-urlencoded",
        method: 'post',
        sidePagination: 'server',
        toolbar: '#toolbar',
        pagination: true,
        dataShowToggle: true,
        url:"${ctx}/role/getRoleList",
        columns: [
            {
                field: 'num',
                title: '序号',
                formatter:function (value, row, index) {
                    if($('.pagination').find('li.active').find('a').text()){
                        var numbers = parseInt([parseInt($('.pagination').find('li.active').find('a').text())-1]* parseInt($('.page-size').text()) )+ parseInt(index+1);
                        return [
                            numbers
                        ].join('') ;
                    }else{
                        return [
                            index+1
                        ].join('') ;
                    }

                }
            }, {
                field: 'name',
                title: '角色名'
            },{
                field: 'remark',
                title: '备注'
            },{
                field: 'role_id',
                title: '操作',
                formatter:option
            }]
    });
    function option(value,row){
        if(row.code!="" && row.code!=null){
            return [
                '<button class="btn btn-xs btn-info" onclick="fqxFun(\''+value+'\')"><i class="fa fa-asterisk"></i> 赋权限</button>&nbsp;&nbsp;',
                '<button class="btn btn-xs btn-warning" onclick="updateFun(\''+value+'\')"><i class="glyphicon glyphicon-pencil"></i> 修改</button>&nbsp;&nbsp;',
            ].join('');
        }else{
            return [
                '<button class="btn btn-xs btn-info" onclick="fqxFun(\''+value+'\')"><i class="fa fa-asterisk"></i> 赋权限</button>&nbsp;&nbsp;',
                '<button class="btn btn-xs btn-warning" onclick="updateFun(\''+value+'\')"><i class="glyphicon glyphicon-pencil"></i> 修改</button>&nbsp;&nbsp;',
                '<button class="btn btn-xs btn-danger" onclick="delFun(\''+value+'\')"><i class="glyphicon glyphicon-remove"></i> 删除</button>',
            ].join('');
        }
    };
    function fqxFun(value){
        $('#fjsMal').modal('show');

        $('#role_id_hide').val(value);

        var checkBox = $('#checkBox');
        checkBox.empty();
        $.post("${ctx}/role/selectMenus?role_id="+value,function(data){
            for(var i=0;i<data.menuAll.length;i++){
                if(data.roleMenus.length>0){
                    var checkString='<div class="col-xs-4"><div class="square-blue single-row">' +
                            '<div class="checkbox">' +
                            '<label><input  class="role-check" name="menu_id" ';
                    for(var j=0;j<data.roleMenus.length;j++) {
                        if(data.menuAll[i].menu_id==data.roleMenus[j].menuId){
                            checkString+=' checked  ';
                            continue;
                        }
                    }
                    checkString+=' type="checkbox" value="' + data.menuAll[i].menu_id + '">' + data.menuAll[i].name + '</label>' +
                            '</div></div></div>';
                    checkBox.append(checkString);
                }else{
                    checkBox.append('<div class="col-xs-4"><div class="square-blue single-row">' +
                                        '<div class="checkbox">' +
                                            '<label><input  class="role-check" name="menu_id" type="checkbox" value="' + data.menuAll[i].menu_id + '">' + data.menuAll[i].name + '</label>' +
                                        '</div>' +
                                    '</div></div>');
                }

            }

            $('.role-check').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square',
                increaseArea: '20%' // optional
            });

        },"json");

    };

    $('#subfjsBtn').click(function() {
        var roleCheck = document.getElementsByClassName('role-check');
        var roleVal='';
        for(var i=0;i<roleCheck.length;i++){
            if(roleCheck[i].checked){
                roleVal+=roleCheck[i].value+',';
            }
        }
        $.post("${ctx}/role/configMenus?role_id="+$('#role_id_hide').val()+'&menu_id='+roleVal,function(data){
            zAlert(data.msg);
            $('#fjsMal').modal('hide');
        });
    });

    function updateFun(value){
        loadFun("/role/toRoleUpdate?role_id="+value);
    }

    function delFun(value) {
        zConfirm('确认删除？');
        confirmOk.click(function(){
            $.post("${ctx}/role/deleteRole?role_id="+value,function(data){
                zConfirmHide();
                if(data.success){
                    $("#table1").bootstrapTable('refresh',{url:"${ctx}/role/getRoleList"});
                    setTimeout(function(){
                        zAlert(data.msg)
                    },100);

                }else{
                    setTimeout(function(){
                        zAlert(data.msg)
                    },100);
                }
            });
        });
    }
</script>